@-webkit-keyframes showTab {
    from {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes showTab {
    from {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.tabsy > button {
    width: 100%;
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    outline: 0;
    border: 0;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: transparent
}

.tabsy > .tabButton {
    display: block;
    margin-top: 1px;
    background: #8c8a89;
    padding: 10px;
    color: #f5f5f5;
    text-align: center;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out
}

.tabsy > input {
    display: none
}

.tabsy > input:checked + label + .tab {
    display: block
}

.tabsy > input:checked + label + .tab > .content {
    -webkit-animation: showTab 250ms ease-in-out;
    animation: showTab 250ms ease-in-out
}

.tabsy > .tab {
    background: #fff;
    display: none
}

@media screen and (min-width: 768px) {
    .tabsy {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .tabsy > .tabButton {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        cursor: pointer
    }

    .tabsy > input:checked + label {
        background: #1F75FE;
        color: #FFFFFF;
        padding: 10px;
    }

    .tabsy > .tab {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }
}